<template>
    <div id="app">
        <!-- <div class="page-header">
            <comHeader></comHeader>
        </div> -->
        <div class="page-body">
            <div class="page-side">
                <comSide></comSide>
            </div>
            <div class="page-main-body">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>
<style>
body {
    margin: 0;
    padding: 0;
    /* font-size: 14px; */
}
.page-header {
    height: 60px;
    line-height: 60px;
    width: 100%;
    padding: 0 20px;
    position: relative;
    z-index: 50;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

.page-body {
    /* position: relative; */
}
.page-side {
    position: fixed;
    width: 200px;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: #333744;;
}

.page-main-body {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 200px;
    overflow-y: auto;
    padding: 20px; 
}
a {
    text-decoration: none;
    color: #369;
}

</style>

<script>
import comHeader from "./components/header/ComHeader.vue";
import sideBar from "./components/sideBar/SideBar.vue";
export default {
    name: "App",

    components: {
        comHeader: comHeader,
        comSide: sideBar
    }
};
</script>
